/* 

Avalon  WPG Stein

*/



.services {
			margin-top: 90px;margin-bottom: 300px;
	padding-top: 0vh;
	padding-bottom: 0vh;
	text-align: center;
	background-image: url(  .jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.services .col-md-3 {
	padding-left: 10px;
	padding-right: 10px;
}


.services .col-md-6 {
	padding-left: 10px;
	padding-right: 10px;
}

.services .col-md-12 {
	padding-right: 10px;
	padding-left: 10px;

			margin-top: 30px; 
		
			
}

.flip-container {
  perspective: 1000;
}
/* turning on hover */

.flip-container:hover .flipper {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;


}

.flip-container,
.front,
.back {
  width: 100%;
  				height: 290px;
  text-align: center;
  font-size: 30px;
}


.flip-container1,
.front,
.back {
  width: 100%;
  				height: 290px; margin-top: 30px;
  text-align: center;
  font-size: 30px;
}




/* flipping speed here */

.front {
	padding: 0px 0px;
}

.front .icon {
	color: white;  font-size: 26px;
 
	line-height: 30px;
	text-align: center;
	background-color: lightblue; opacity:;
			border: px solid transparent;
	border-radius: ;
	margin: 0px auto;   font-weight: 300;
}


.front .icon1 {
	color: white;  font-size: 26px;
	line-height: 30px;
	text-align: center;
	opacity:; border: 1px solid grey;
	border-radius: 1px solid grey;
	margin: 390px auto;   font-weight: 300;

	background-color: #66CDAA; 
}

.front .icon2 {
	color: white;  font-size: 26px;
	line-height: 30px;
	text-align: center;
	opacity:; border: px solid transparent;
	border-radius: ;
	margin: 120px auto;   font-weight: 300;

	background-color: lightblue; 
}

.front .icon3333 {
	color: white;  font-size: 26px;
	line-height: 30px;
	text-align: center;
	opacity:; border: px solid transparent;
	border-radius: ;
	margin: 200px auto;   font-weight: 300;

	background-color: lightgreen; 
}



.front h4 {
	text-align: center;     	padding: 0px; 
				font-size: 23px; 
	text-transform: uppercase;
	font-weight: 700;
}

.flipper {
  -webkit-transition: 0.9s all;   
-webkit-transition-delay: 0.9s; 
-moz-transition: 0.9s all;   
-moz-transition-delay: 5s; 
-ms-transition: 0.9s all;   
-ms-transition-delay: 5s; 
-o-transition: 0.9s all;   
-o-transition-delay: 5s; 
transition: 0.9s all;   
transition-delay: 0.9s; 
  transform-style: preserve-3d;
  position: relative;
}
/* making the the other side hidden while flipping */


.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* front side is in front of a back side */

.front {
  z-index: 2;
  color: green;
  /* for firefox 31 */
	transform: rotateY(0deg);
}
/* back side */

.back {
  transform: rotateY(180deg);
}

.back p {
  				color: white;
 			 padding: 60px 20px;
					font-size: 16px;
	line-height: 22px;
	color: white;
}



.first-service .front {
			background-color: ;
			background-image:url(.jpg); background-position: center; 					background-repeat:no-repeat;
}

.first-service .back {
			background-color: ;
			background-image:url(sunset.jpg); background-position: center; 					background-repeat:no-repeat;
}

.second-service .front,
.second-service .back {
			background-color: whitesmoke;
			background-image:url(welcome-2.jpg); background-position: center;
		background-repeat:no-repeat;
}


.third-service .front {
			background-color: white  ; border: 0px solid yellow; opacity:;
			background-image:url(building-7.jpg); background-position: center; 					background-repeat:no-repeat;
}

.third-service .back {
			background-color: ;border: 3px solid yellow; 
			background-image:url(bagger.jpg); background-position: center; 					background-repeat:repeat;
}